<template>
  <div class="process-dialog">
    <el-dialog title="选择审批流程" :visible.sync="showDialog" width="50%" :before-close="handleClose"
      @update:showDialog="toggleDialog">
      <div v-for="item in classifyList" :key="item.id">
        <div class="classify-item">{{ item.processSortName }}</div>
        <div class="classify-content">
          <template v-for="itemSub in item.children">
            <span :key="itemSub.id" @click="goForm(itemSub)" class="classify-itemSub">
              {{ itemSub.name }}
            </span>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProcessClassifyList,
  getProcessList,
} from "@/api/internalApproval/myApplication.js";
export default {
  data() {
    return {
      classifyList: [],
    };
  },
  components: {},
  props: {
    //弹窗显、隐
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    goForm(row) {

      this.$emit("update:showDialog", false);
      this.$emit("goForm", row);
    },
    // 弹窗关闭
    handleClose() {
      this.toggleDialog();
    },
    toggleDialog(visible = false) {
      this.$emit("update:showDialog", visible);
    },
    async getProcessClassifyList() {
      const result = await getProcessClassifyList();
      this.classifyList = result.data.childNodeList;
      this.classifyList.forEach((item) => {
        this.getProcessList(item.id).then((itemSub) => {
          item.children = itemSub.data.list;
        });
      });
    },
    // 获取分类下的流程列表
    async getProcessList(sortId) {
      const result = await getProcessList({
        sortId: sortId,
        pageNum: 1,
        pageSize: 15,
      });
      return result;
    },
  },
  mounted() {
    this.getProcessClassifyList();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 300px;
}

.classify-item {
  margin: 10px 0;
}

.classify-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.classify-itemSub {
  padding: 5px 10px;
  border: 1px solid #7E98E7;
  border-radius: 10px;
}
</style>
